<ion-list class="margin-bottom ion-no-padding">
  <ion-item lines="none" class="ion-activatable">
    <ion-avatar slot="start">
      <img [src]="contactsService.user?.avatar" />
      <ion-ripple-effect></ion-ripple-effect>
    </ion-avatar>
    <ion-label class="ion-text-wrap">
      <h2 class="text-height">
        <strong>My status</strong>
      </h2>
      <p class="text-height">Tap to add status</p>
    </ion-label>
    <ion-ripple-effect></ion-ripple-effect>
  </ion-item>

  <ion-item-group>
    <ion-item-divider class="divider">
      <ion-label color="dark">Recent updates</ion-label>
    </ion-item-divider>
    <ion-item
      *ngFor="let contact of contactsService.contacts"
      class="ion-activatable"
    >
      <ion-avatar slot="start">
        <img [src]="contact?.contactAvatar" />
        <ion-ripple-effect></ion-ripple-effect>
      </ion-avatar>
      <ion-label class="ion-text-wrap">
        <h2 class="text-height">
          <strong>{{ contact?.contactName }}</strong>
        </h2>
        <p class="text-height">{{ contact?.time | date: "medium" }}</p>
      </ion-label>
      <ion-ripple-effect></ion-ripple-effect>
    </ion-item>
  </ion-item-group>
</ion-list>

<ion-fab vertical="bottom" horizontal="end" slot="fixed" class="pen-fab">
  <ion-fab-button color="light" size="small">
    <ion-icon color="primary" name="pencil-sharp"></ion-icon>
  </ion-fab-button>
</ion-fab>

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
  <ion-fab-button color="secondary">
    <ion-icon color="light" name="camera"></ion-icon>
  </ion-fab-button>
</ion-fab>
